<template>
  <div class="project">
    <el-card class="box-card">
      <el-row>
        <el-col :span="20">
          <div class="color-show clearfix">
            <div class="reminder fl clearfix">
              <div class="clearfix fl">
                <div
                  class="grade fl"
                  v-for="(tag, index) in field105Options"
                  :key="index"
                >
                  <el-tag :type="tag.type" effect="dark">{{
                    tag.label
                  }}</el-tag>
                </div>
              </div>
            </div>
            <div class="addition fr">
              <el-button type="danger" @click="addition">添加</el-button>
            </div>
          </div>
          <!-- 日历 -->
          <div class="calendar">
            <el-calendar v-model="kalendar">
              <template slot="dateCell" slot-scope="{ dete, data }">
                <div class="fl">
                  <p
                    :class="data.isSelected ? 'is-selected' : ''"
                    class="day-style"
                  >
                    {{
                      data.day
                        .split("-")
                        .slice(2)
                        .join("-")
                    }}
                    {{ data.isSelected ? "✔️" : "" }}
                  </p>
                </div>
                <div class="fl">
                  <el-tag size="medium" effect="dark" closable>{{
                    grade(data)
                  }}</el-tag>
                </div>
              </template>
            </el-calendar>
          </div>
          <!-- 日历end -->
        </el-col>
        <!-- 计划 -->
        <el-col :span="4">
          <el-timeline v-for="(item,index) in PlanDetails" :key="index" >
            <el-timeline-item
              :timestamp="item.date"
              placement="top"
              color="#0bbd87"
            >
              <el-card>
                <h4>{{item.content}}</h4>
                <div class="">
                  {{item.project}}
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>
      <!-- 计划 -->
      <!-- 弹出框 -->
      <el-dialog
        title="添加排产计划"
        :modal-append-to-body="false"
        :visible.sync="dialogFormVisible"
        :close-on-click-modal="false"
      >
        <div class="add-event">
          <el-form
            ref="elForm"
            :model="formData"
            :rules="rules"
            size="medium"
            label-width="100px"
          >
            <el-form-item label="排产计划" prop="field101">
              <el-input
                v-model="formData.field101"
                placeholder="请输入排产计划"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="日期选择" prop="field109">
              <el-date-picker
                v-model="formData.field109"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择日期选择"
                clearable
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="选择级别" prop="field105">
              <el-radio-group v-model="formData.field105" size="mini">
                <el-radio-button
                  v-for="(item, index) in field105Options"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                  >{{ item.label }}</el-radio-button
                >
              </el-radio-group>
            </el-form-item>
            <el-form-item size="large">
              <el-button type="primary" @click="submitForm">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
      <!-- 弹出框end -->
    </el-card>
  </div>
</template>

<script>
import "@/assets/css/calendar.less";
import LoginVue from "../login/Login.vue";
export default {
  data() {
    return {
      kalendar: new Date(),
      dialogFormVisible: false,
      schedule: null,
      PlanDetails: [
        {
          date: "08:00-12:00",
          content: "",
          project: "",
          id:1
        },
        {
          date: "12:40-17:00",
          content: "",
          project: "",
          id:2
        },
        {
          date: "17:30-19:30",
          content: "",
          project: "",
          id:3
        },
        {
          date: "19:30-23:30",
          content: "",
          project: "",
          id:4
        },
        {
          date: "00:10-04:30",
          content: "",
          project: "",
          id:5
        },
        {
          date: "05:00-07:00",
          content: "",
          project: "",
          id:6
        },
      ],

      formData: {
        field101: undefined,
        field109: null,
        field105: "",
      },
      rules: {
        field101: [
          {
            required: true,
            message: "请输入排产计划",
            trigger: "blur",
          },
        ],
        field109: [
          {
            required: true,
            message: "请选择日期选择",
            trigger: "change",
          },
        ],
        field105: [
          {
            required: true,
            message: "单选框组不能为空",
            trigger: "change",
          },
        ],
      },
      field105Options: [
        {
          label: "紧急优先",
          value: 1,
          type: "danger",
        },
        {
          label: "清洁保养",
          value: 2,
          type: "success",
        },
        {
          label: "正常计划",
          value: 3,
          type: "",
        },
        {
          label: "停机检测",
          value: 4,
          type: "warning",
        },
        {
          label: "减产减量",
          value: 5,
          type: "info",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.calendar();
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    addition() {
      this.dialogFormVisible = true;
    },
    calendar() {
      this.axios({
        method: "get",
        url: "/get_plan",
      })
        .then((res) => {
          console.log(res);
          if (res.data.meta.status == 200) {
            this.schedule = res.data.data;
          } 
        })
        .catch((err) => {
          console.log(err);
        });
    },
    grade(v) {
      let date = new Date(v.day).getTime() / 1000;

      if (this.schedule != null) {
        for (let i = 0; i < this.schedule.length; i++) {
          if (date <= this.schedule[i].start && date >= this.schedule[i].end) {

            if(v.isSelected){
               let arr = this.schedule[i].workplan.split(',')
               console.log( "选中的计划表==>",arr);
               for (let j = 0; j < this.PlanDetails.length; j++) {
                 this.PlanDetails[j].content = "暂无计划"
                    this.PlanDetails[j].project = "如需要制定，前到排产计划安排"
                 for(let k =0; k<arr.length;k++)
                  if(this.PlanDetails[j].id ==arr[k] ){
                    this.PlanDetails[j].content = this.schedule[i].title
                    this.PlanDetails[j].project = this.schedule[i].out
                     break
                  }
               }
            }

            return this.schedule[i].numbers;
          }
        }
      }
    },
  },
};
</script>
